<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
         <style type="text/css">
         canvas{background-color: #000000;
         background-image: url(../img/动图.gif);
         
         background-size:200px;
         background-position:left bottom;
 background-repeat: no-repeat;}
       
          
         </style>
	</head>
	<body>
		<canvas id="mycanvas" width="800" height="560" ></canvas>
		
	<script type="text/javascript">
		var canvas=document.getElementById("mycanvas");
			var ctx=canvas.getContext("2d");
			var img=new Image();
			var img1=new Image();
				var img2=new Image();
				img2.src="../img/狗.png";
			img1.src="../img/树.png";
img.src="../img/呀.png";
  ctx.save();
  img.onload=function(){
  	ctx.drawImage(img,520,420,200,160);
  };
  img1.onload=function(){
  	ctx.drawImage(img1,560,90,400,500);
  }
   img2.onload=function(){
  	ctx.drawImage(img2,425,350,47,60);
  }


			
			//矩形
				ctx.beginPath();
			ctx.fillStyle="#E3E5AA";
			ctx.fillRect(300,320,190,230);
			ctx.fill();
			//画小矩形
						ctx.beginPath();
			ctx.fillStyle="#E85811";
			ctx.fillRect(320,410,45,140);
			ctx.fillStyle="#BE85811";
			ctx.fillRect(365,410,45,140);
			ctx.fillStyle="#000000";
			ctx.fillRect(363,410,2,140);
						ctx.fill();
			//栈栏
						ctx.beginPath();
			ctx.fillStyle="#E85811";
			ctx.fillRect(10,500,5,55);
						ctx.fill();
			ctx.fillStyle="#E85811";
			ctx.fillRect(20,490,5,55);
						ctx.fill();
			ctx.fillStyle="#E85811";
			ctx.fillRect(30,480,5,55);
						ctx.fill();
			ctx.fillStyle="#E85811";
			ctx.fillRect(40,470,5,55);
						ctx.fill();
			ctx.fillStyle="#E85811";
			ctx.fillRect(50,460,5,55);
			ctx.fill();
			ctx.fillStyle="#E85811";
			ctx.fillRect(60,450,5,55);
			//左栈栏
			ctx.fill();
			ctx.fillStyle="#E85811";
			ctx.fillRect(70,440,5,55);
			ctx.fill();
			ctx.fillStyle="#E85811";
			ctx.fillRect(80,440,5,55);
			ctx.fill();
			ctx.fillStyle="#E85811";
			ctx.fillRect(90,440,5,55);
			ctx.fill();
			ctx.fillStyle="#E85811";
			ctx.fillRect(100,440,5,55);
			ctx.fill();
			ctx.fillStyle="#E85811";
			ctx.fillRect(110,440,5,55);
			ctx.fill();
			ctx.fillStyle="#E85811";
			ctx.fillRect(120,440,5,55);
			ctx.fill();
			ctx.fillStyle="#E85811";
			ctx.fillRect(130,440,5,55);
			ctx.fill();
			ctx.fillStyle="#E85811";
			ctx.fillRect(140,440,5,55);
			ctx.fill();
			ctx.fillStyle="#E85811";
			ctx.fillRect(150,440,5,55);
			ctx.fill();
			ctx.fillStyle="#E85811";
			ctx.fillRect(160,440,5,55);
			ctx.fill();
			ctx.fillStyle="#E85811";
			ctx.fillRect(170,440,5,55);
			ctx.fill();
			ctx.fillStyle="#E85811";
			ctx.fillRect(180,440,5,55);
			ctx.fill();
			ctx.fillStyle="#E85811";
			ctx.fillRect(190,440,5,55);
			ctx.fill();
			ctx.fillStyle="#E85811";
			ctx.fillRect(200,440,5,55);
			ctx.fill();
			ctx.fillStyle="#E85811";
			ctx.fillRect(210,440,5,55);
			ctx.fill();
			ctx.fillStyle="#E85811";
			ctx.fill();
			ctx.fillStyle="#E85811";
			ctx.fillRect(220,440,5,55);
			ctx.fill();
			ctx.fillStyle="#E85811";
			ctx.fillRect(230,440,5,55);
			ctx.fill();
			ctx.fillStyle="#E85811";
			ctx.fillRect(240,440,5,55);
			ctx.fill();
			ctx.fillStyle="#E85811";
			ctx.fillRect(250,440,5,55);
			ctx.fill();
			ctx.fillStyle="#E85811";
			ctx.fillRect(260,440,5,55);
				ctx.fill();
			ctx.fillStyle="#E85811";
			ctx.fillRect(270,440,5,55);
			ctx.fill();
			ctx.fillStyle="#E85811";
			ctx.fillRect(280,440,5,55);
			//右栈栏
			ctx.fill();
			ctx.fillStyle="#E85811";
			ctx.fillRect(500,440,5,55);
			ctx.fill();
			ctx.fillStyle="#E85811";
			ctx.fillRect(510,440,5,55);
			ctx.fill();
			
			ctx.fillStyle="#E85811";
			ctx.fillRect(520,440,5,55);
			ctx.fill();
			ctx.fillStyle="#E85811";
			ctx.fillRect(530,440,5,55);
		
			ctx.fill();
			ctx.fillStyle="#E85811";
			ctx.fillRect(540,440,5,55);
			ctx.fill();
			ctx.fillStyle="#E85811";
			ctx.fillRect(550,440,5,55);
			ctx.fill();
		
			ctx.fillStyle="#E85811";
			ctx.fillRect(560,440,5,55);
			ctx.fill();
			ctx.fillStyle="#E85811";
			ctx.fillRect(570,440,5,55);
			ctx.fill();
			ctx.fillStyle="#E85811";
			ctx.fillRect(580,440,5,55);
			ctx.fill();
			ctx.fillStyle="#E85811";
			ctx.fillRect(590,440,5,55);
			ctx.fill();
			ctx.fillStyle="#E85811";
			ctx.fillRect(600,440,5,55);
			ctx.fill();
			ctx.fillStyle="#E85811";
			ctx.fillRect(610,440,5,55);
			ctx.fill();
			ctx.fillStyle="#E85811";
			ctx.fillRect(620,440,5,55);
			ctx.fill();
			ctx.fillStyle="#E85811";
			ctx.fillRect(630,440,5,55);
			ctx.fillStyle="#E85811";
			ctx.fillRect(640,440,5,55);
			ctx.fill();
			ctx.fillStyle="#E85811";
			ctx.fillRect(650,440,5,55);
			ctx.fillStyle="#E85811";
			ctx.fillRect(660,440,5,55);
			ctx.fill();
			ctx.fillStyle="#E85811";
			ctx.fillRect(670,440,5,55);
			ctx.fill();
			ctx.fillStyle="#E85811";
			ctx.fillRect(680,440,5,55);
			ctx.fill();
			ctx.fillStyle="#E85811";
			ctx.fillRect(690,440,5,55);
			ctx.fill();
			ctx.fillStyle="#E85811";
			ctx.fillRect(700,440,5,55);
			ctx.fill();
			ctx.fillStyle="#E85811";
			ctx.fillRect(710,440,5,55);
		ctx.fill();
			ctx.fillStyle="#E85811";
			ctx.fillRect(720,440,5,55);
			ctx.fill();
			ctx.fillStyle="#E85811";
			ctx.fillRect(730,440,5,55);ctx.fill();
			ctx.fillStyle="#E85811";
			ctx.fillRect(740,440,5,55);
			ctx.fill();
			ctx.fillStyle="#E85811";
			ctx.fillRect(750,440,5,55);
			ctx.fill();
			ctx.fillStyle="#E85811";
			ctx.fillRect(760,440,5,55);
			ctx.fill();
			ctx.fillStyle="#E85811";
			ctx.fillRect(770,440,5,55);
			ctx.fill();
			ctx.fillStyle="#E85811";
			ctx.fillRect(780,440,5,55);
			
					
			//四个小窗口
						ctx.beginPath();
			ctx.fillStyle="#E85811";
			ctx.fillRect(448,360,20,20);
			ctx.fillStyle="#E85811";
			ctx.fillRect(426,360,20,20);
			ctx.fillStyle="#E85811";
			ctx.fillRect(426,382,20,20);
			ctx.fillStyle="#E85811";
			ctx.fillRect(448,382,20,20);
			
			
			//画圆
			ctx.beginPath();
			ctx.arc(350,470,7,0,2*Math.PI);
			ctx.fillStyle="#000000";
			ctx.fill();
			ctx.arc(380,470,7,0,2*Math.PI);
			ctx.fillStyle="#000000";
			ctx.fill();
			ctx.beginPath();
			ctx.arc(392,320,120,0,Math.PI,true);
			ctx.fillStyle="#E85811";
		ctx.fill();

		   //月亮
		ctx.beginPath();
			ctx.arc(100,80,55,0,2*Math.PI);
			ctx.shadowBlur=100;
			ctx.shadowColor="white";
			ctx.fillStyle="#F2E064";
			ctx.fill();
			
			
		</script>
		
		
		
	</body>
</html>
